<template>
	<view class="vip-detail" :style="{ '--price': vuex_config.price, '--color': vuex_config.themeColor1 }">
		<sww-swipe :list="swipeList" indicatorDots autoplay></sww-swipe>
		<view class="detail-box">
			<view class="u-line-1 u-font-30 title">{{ dataForm.name }}</view>
			<view class="price">
				<view class="p-top">
					<text class="u-font-24 price_color u-m-r-5">￥</text>
					<view style="display: inline;" class="u-font-36 fw-bold price_color u-m-r-15 pricearr">
						<view style="display: inline;" v-if="dataForm.minPrice ? true : false">
							{{ $price(dataForm.minPrice) }} - {{ $price(dataForm.maxPrice) }}
						</view>
						<text v-else>{{ $price(dataForm.price) }}</text>
					</view>
					
					<block v-if="vuex_user.type == 2 && dataForm.rebate > 0 && vuex_user.commission >0">
						<text class="u-font-25 sww-tp u-m-r-5">分享赚</text>
						<text class="u-font-20 sww-tp ">￥</text>
						<text class="u-font-25 sww-tp">{{ $rebateNum(dataForm.rebate, vuex_user.commission) }}</text>
					</block>
					<view class="Marking-price" v-if="!dataForm.minPrice && dataForm.cost_price > 0 && dataForm.cost_price > dataForm.price">￥{{ dataForm.cost_price }}</view>
				</view>
				<view class="">
					<button class="p-bottom u-reset-button" open-type='share'>
						<u-icon name="zhuanfa"></u-icon>
						<text style="padding-left: 10rpx;">分享</text>
					</button>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="parse" v-if="dataForm.details">
			<u-parse :html="dataForm.details"></u-parse>
		</view>
		<sww-goods-action>
			<view class="nav" @click="$linkTo('index')">
				<u-icon name="home" size="36"></u-icon>
				<text>首页</text>
			</view>
			<view class="nav" @click="$customer">
				<button open-type='contact' class="u-reset-button contact_btn"></button>
				<u-icon name="kefu-ermai" size="36"></u-icon>
				<text>客服</text>
			</view>
			<!-- <view class="present-price nav_price">
				<text class="u-font-28 icon">￥</text>
				<text class="num u-font-42">{{ dataForm.price }}</text>
			</view> -->
			<view class="btn u-font-36" @click="goBuy">立即购买</view>
		</sww-goods-action>
		
		<spec-view ref="spec_view" :prodInfo="dataForm" @submit="submit"></spec-view>
		<sww-login></sww-login>
		<sww-sidebar stockName="product_detailed" :scroll-top="scrollTop" :prod-info="{ ...dataForm, prodType: 12 }" share
			:contact="vuex_config.has_contact"></sww-sidebar>
	</view>
</template>

<script>
	import {
		pageShare
	} from '@/mixins/pageShare';
	import {
		sideBarMixin
	} from '@/components/sww-sidebar';
	import {
		uniNavigate,
		uniToast,
		uniBack,
		uniModal,
		uniCall
	} from '@/utils/uniPromise.js';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	import specView from './components/spec.vue'
	export default {
		mixins: [pageShare,sideBarMixin],
		data() {
			return {
				swipeList: [],
				paramsObj:{},
				dataForm: {},
				browTime: 0,
				value: 1,
				show: false
			};
		},
		components:{
			'spec-view':specView
		},
		onLoad: function(options) {
			if (options.id) {
				this.initPage(options.id);
				this.getBrowTime();
			} else {
				this.$linkTo('index');
			}
		},
		onShareAppMessage: function() {
			return this.getShareAppMessage();
		},
		onShareTimeline: function() {
			return this.getShareTimeline();
		},
		onUnload() {
			if (this.browTime && this.$isLogin()) {
				this.addBrow(this.dataForm.pk_id);
			}
		},
		methods: {
			// 记录开始浏览时间
			getBrowTime() {
				this.browTime = new Date().getTime();
			},
			// 新增浏览记录
			addBrow(prodId) {
				let date = new Date();
				let duration = parseInt((date.getTime() - this.browTime) / 1000);
				date = formatDate(date, 'YYYY-MM-DD HH:mm:ss');
				this.$resPost('AddUsersBrowse', {
					type: 9,
					product_id: prodId,
					date_time: date,
					duration: duration
				}).catch(() => {});
			},
			initPage(id) {
				this.$loading();
				this.$resPost('GetBonusProDetailed', {
						pk_id: id
					})
					.then(({
						data
					}) => {
						if (data.status != 1 || !data.product_detailed || !data.product_detailed[0]) {
							return Promise.reject();
						}
						uni.setNavigationBarTitle({
							title: data.name || '详情'
						});
						if (data.img) {
							this.swipeList = data.img.split(',').map(item => {
								let obj = {
									img: item
								};
								return obj;
							});
						}
						data.price = data.product_detailed[0].amount;
						data.rebate = data.product_detailed[0].rebate;
						data.cost_price = data.product_detailed[0].cost_price
						if (data.product_detailed && data.product_detailed.length > 1) {
							// 多规格处理：获取最小价格和最大价格
							data.minPrice = data.product_detailed[0].amount;
							data.maxPrice = data.product_detailed[data.product_detailed.length - 1].amount;
							if (data.minPrice == data.maxPrice) {
								data.minPrice = '';
								data.maxPrice = '';
							}
						}
						
						this.dataForm = {
							...data
						}
						this.customShareParams(); // 设置当前产品页的分享参数
						setTimeout(()=>{
							this.$hide();
						},300)
					})
					.catch(() => {
						this.$hide();
						uniModal({
							title: '商品已下架',
							showCancel: false,
							confirmText: '我知道了'
						}).then(() => {
							uniBack(1);
						});
					});
			},
			// 设置当前产品页的分享参数
			customShareParams() {
				if (!this.shareParams.title) {
					let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
					let curRoute = routes[routes.length - 1].route; //获取当前页面路由
					let curParam = routes[routes.length - 1].options; //获取路由参数
					let obj = this.swipeList.find((item) => {
						return item.img
					})
					this.shareParams = {
						title: this.dataForm.name,
						path: curRoute,
						query: curParam,
						imgUrl: obj && obj.img ? obj.img : ''
					};
					this.onShareByH5();
				}
			},
			submit (specActItem) {
				if (specActItem.specNum < 1) {
					this.$toast('请选择数量');
					return;
				}
				let params = {
					list: [{
						product_img: this.swipeList[0] ? this.swipeList[0].img : '',
						express_num: 0, // 多少起免邮费
						express_price: 0, // 快递费用
						product_freight: [], // 运费模板
						num: specActItem.specNum,
						price: specActItem.amount,
						product_id: this.dataForm.pk_id,
						product_name: this.dataForm.name,
						fk_attr_id: specActItem.pk_id, // 属性库存id
						standard: specActItem.name // 属性库存名称
					}]
				}
				
				this.paramsObj = params
				
				// #ifdef    MP-BAIDU || MP-ALIPAY || MP-TOUTIAO	
				this.$to(`/package/product/bonusProd/order`)
				// #endif
				
				// #ifndef  MP-BAIDU || MP-ALIPAY || MP-TOUTIAO	
				uniNavigate('/package/product/bonusProd/order').then(res => {
					res.eventChannel.emit('acceptParams', params);
				});
				// #endif
			},
			goBuy() {
				this.$login('goBuy').then(res => {
					this.$refs.spec_view.$showPopup()
				});
			},
			// 客服
			$customer() {
				// #ifdef H5
				let phone = this.vuex_business.custom_tel;
				uniCall(phone);
				// #endif
			},
		}
	};
</script>

<style lang="scss" scoped>
	.vip-detail {
		.detail-box {
			width: 100%;
			padding: 30rpx;

			.title {
				color: #333;
				font-weight: bold;
			}

			.price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;

				.Marking-price {
					text-decoration: line-through;
					font-size: 24rpx;
					color: #ccc;
					margin-left: 10rpx;
					position: relative;
					top: 4rpx;
				}
			}
		}
		



		.present-price {
			color: var(--price);

			.icon {
				font-size: 28rpx;
				font-weight: bold;
			}

			.num {
				font-weight: bold;
			}
		}

		.line {
			width: 100%;
			height: 10rpx;
			background-color: #f3f3f3;
		}

		.parse {
			padding: 30rpx;
		}

		.nav_price {
			margin-right: 20rpx;
		}

		.nav {
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.contact_btn {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
			}
		}

		.btn {
			flex: 3;
			background-color: var(--color);
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-weight: bold;
		}
	}

	.p-bottom {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
		margin-left: 0;
		margin-right: 0;
		background-color: none !important;
		border: none !important;
	}

	.p-top {
		display: flex;
		align-items: center;
		.price_color{
			color: var(--price);
		}
	}
</style>
